<template>
	<view class="content">
		<u-navbar title="服用说明" :autoBack="true" :bgColor="bgColor"></u-navbar>
		<view class="uCollapse">
			<u-collapse >
				<u-collapse-item title="产品存储" open="true">
					<slot>
						<image :src="baseUrl+'directions1.png'" class="directions1" />
					</slot>
				</u-collapse-item>
			</u-collapse>
			<u-collapse >
				<u-collapse-item title="使用方法">
					<slot>
						<image :src="baseUrl+'directions2.png'" class="directions2" />
					</slot>
				</u-collapse-item>
			</u-collapse>
			<u-collapse >
				<u-collapse-item title="注意事项">
					<slot>
						<image :src="baseUrl+'directions3.png'" class="directions3" />
					</slot>
				</u-collapse-item>
			</u-collapse>
		</view>
			<view class="nextBtn" @click="$openCuster()">
				咨询客服
			</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/user/`,
			}
		},
		methods: {
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			}
		},
		computed: {},
		onLoad() {},
		onShow() {}
	}
</script>

<style lang="scss" scoped>
	button{
		padding: 0 !important;
	}
	.directions3{
		position: relative;
		width: 646rpx;
		height: 1325rpx;
		margin-top: 30rpx;
	}
	.directions2{
		position: relative;
		width: 646rpx;
		height: 470rpx;
		margin-top: 30rpx;
	}
	.directions1{
		position: relative;
		width: 646rpx;
		height: 1470rpx;
		margin-top: 30rpx;
	}
	.nextBtn {
		position: relative;
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #fff;
		font-family: 'am';
		border-radius: 45rpx;
		margin-left: 76rpx;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		background-color: #f08229;
	}
	.line {
		width: 100%;
		height: 1rpx;
		background-color: #d9d9d9;
		margin-top: 50rpx;
	}

	.uCollapse {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;

		// /deep/ .u-collapse-body {
		// 	height: auto !important;
		// }
		/deep/.u-collapse-title {
			font-size: 30rpx;
			color: #141414;
			font-family: 'am';
		}

		/deep/.u-collapse-content {
			font-size: 27rpx;
			color: #141414;
			font-family: 'ar';
		}
	}

	.title {
		display: block;
		margin-left: 40rpx;
		margin-top: 38rpx;
		font-size: 30rpx;
		font-family: 'ab';
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>